<template>
<div>
    <!-- 面包屑组件 -->
    <breadcrumb :navData="['数据统计','数据报表']"></breadcrumb>

     <!-- Card 卡片 -->
    <el-card>
         <div id="main" style="width:750px;height:400px;"></div>
    </el-card>
</div>

</template>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
//导入echarts
import * as echarts from "echarts";
//导入lodash
import _ from "lodash";
export default {
  name: "Reports",
  data() {
    return {
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        // legend: {
        //   data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            // type: "category",
            boundaryGap: false
            // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  mounted() {
    this.getReportsData();
  },
  methods: {
    async getReportsData() {
      let main = document.getElementById("main");
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(main);
      let res = await this.$http.get("reports/type/1");
      console.log(res);
      if(res.meta.status !== 200) return this.$message.error('获取折线图数据失败')
      // Object.assign(this.option, res.data);
      //lodash插件
      //合并res.data和this.options
      const result = _.merge(res.data, this.options);

      // 绘制图表
      myChart.setOption(result);
    }
  }
};
</script>

<style  lang='scss' scoped>
</style>